<template>
  <div class="con">
    <!-- <div class="scale-btn">
      <span class="add-icon" id="btn_big"
        ><span><img src="~assets/img/map-scale-add.png" alt=""/></span
      ></span>
      <span class="reduce-icon" id="btn_small"
        ><span><img src="~assets/img/map-scale-reduce.png" alt=""/></span
      ></span>
    </div> -->
    <div id="SceneView" v-loading="loadingMap"></div>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
import { loadModules } from "esri-loader";

export default {
  name: "ArcGIS",
  props: {
    markArc: Object,
  },
  data() {
    return {
      marker: [],
      marker_icon0: require("@/assets/img/marker-icon0.png"),
      marker_icon1: require("@/assets/img/marker-icon1.png"),
      marker_icon_1: require("@/assets/img/marker-icon-1.png"),
      latitude: baseCenter.lat,
      longitude: baseCenter.lng,
      distance: 60000,
      deleteArr: [],
      layer: null,
      isFirst: true,
      Graphic: null,
      loadingMap: true,
    };
  },
  async mounted() {
    await this.initMap();
  },
  methods: {
    /*
        获取数据
    */
    async getMarkerData(layer, Graphic, map) {
      this.loadingMap = true;
      var that = this;
      that.marker = [];
      this.Graphic = Graphic;
      let datas = this.markArc;
      var devices = [datas];
      if (Array.isArray(devices) && devices.length > 0) {
        for (let i = 0; i < devices.length; i++) {
          this.marker.push({
            longitude: devices[i].longitude,
            latitude: devices[i].latitude,
            attributes: {
              ...devices[i],
              all: 0,
            },
          });
        }

        let val = this.marker;
        let graphicsLayerGather = []; // 需要在地图上描绘的点位集合
        if (val.length > 0) {
          for (let i = 0; i < val.length; i++) {
            let point = val[i];
            let Ghc = new Graphic({
              attributes: point.attributes,
              geometry: {
                type: "point",
                longitude: point.longitude, //经度
                latitude: point.latitude, //纬度
              },
            });
            graphicsLayerGather.push(Ghc);
          }
        }
        layer
          .applyEdits({
            addFeatures: graphicsLayerGather,
            deleteFeatures: this.deleteArr,
          })
          .then((results) => {
            console.log(results);
            this.loadingMap = false;
          });
        this.deleteArr = graphicsLayerGather;
      }
    },

    /*
        搜索
    */
    fnSearch(val) {
      this.marker = [];
      if (Array.isArray(val) && val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          this.marker.push({
            longitude: val[i].location.longitude,
            latitude: val[i].location.latitude,
            attributes: {
              ...val[i],
              ...val[i].location,
            },
          });
        }
      }
      let graphicsLayerGather = []; // 需要在地图上描绘的点位集合
      if (this.marker.length > 0) {
        for (let i = 0; i < this.marker.length; i++) {
          let point = this.marker[i];
          let Graphic = this.Graphic;
          let Ghc = new Graphic({
            attributes: point.attributes,
            geometry: {
              type: "point",
              longitude: point.longitude, //经度
              latitude: point.latitude, //纬度
            },
          });
          graphicsLayerGather.push(Ghc);
        }
      }
      console.log(this.marker, this.marker.length);
      this.layer
        .applyEdits({
          addFeatures: graphicsLayerGather,
          deleteFeatures: this.deleteArr,
        })
        .then((results) => {
          console.log(results);
        });
      this.deleteArr = graphicsLayerGather;
    },

    /*
        地图初始化
    */
    initMap() {
      this.loadingMap = true;
      var _that = this;
    //   let options = {
    //     url: "https://js.arcgis.com/4.13/",
    //     css: "https://js.arcgis.com/4.13/esri/themes/light/main.css",
    //   };
      let options = {
        url: "http://10.238.252.73/javascript/api/4.22/init.js",
        css: "http://10.238.252.73/javascript/api/4.22/esri/themes/light/main.css",
      };
      loadModules(
        [
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/TileLayer",
          "esri/PopupTemplate",
          "esri/Graphic",
          "esri/geometry/Point",
          "esri/layers/FeatureLayer",
          "esri/layers/support/Field",
          "esri/widgets/ScaleBar",
          "esri/widgets/Zoom",
          "esri/layers/GraphicsLayer",
        ],
        options
      ).then(
        async ([
          Map,
          MapView,
          TileLayer,
          PopupTemplate,
          Graphic,
          Point,
          FeatureLayer,
          Field,
          Scalebar,
          Zoom,
          GraphicsLayer,
        ]) => {
          // var map = new Map();
          var map = new Map("map", { logo: false, autoResize: true });
          let view = new MapView({
            container: "SceneView",
            map: map,
            zoom: 10,
          });
          //zoom最小最大
          view.constraints = {
            minZoom: 5,
            maxZoom: 25,
          };
          let layerUrl =
            "http://10.238.252.73:6080/arcgis/rest/services/yongchengdzdt/MapServer";
          let layer = new TileLayer(layerUrl, null);
          map.layers.add(layer);

          //test
          // window.map.resize(true);

          //icon
          var uniqueValueInfos = [
            {
              value: "0",
              symbol: {
                type: "picture-marker",
                url: this.marker_icon0,
                width: "20px",
                height: "20px",
              },
            },
          ];
          var layerFrus = new FeatureLayer({
            id: "deviceLayer",
            title: "设备图层",
            source: [],
            objectIdField: "OBJECTID",
            fields: [
              {
                name: "OBJECTID",
                type: "oid",
              },
              {
                name: "all",
                type: "string",
              },
            ],
            outFields: ["*"],
            geometryType: "point",
            renderer: {
              type: "unique-value",
              //提取type作为渲染图标类型的标识
              valueExpression: `return $feature.all`,
              //所有图标类型声明
              uniqueValueInfos,
            },
          });
          this.layer = layerFrus;
          map.add(layerFrus);
          this.isFirst = true;

          //渲染标注点
          //this.renderMarker(layerFrus, Graphic);

          // 比例尺
          var scale = new Scalebar({
            view: view,
            unit: "metric",
            style: "ruler",
          });
          view.ui.add(scale, {
            position: "bottom-left",
          });
          //隐藏自带的zoom控件
        //   view.ui._removeComponents(["zoom"]);

          await layerFrus.when(() => {
            this.getMarkerData(layerFrus, Graphic, map);
          });
        }
      );
    },
  },
  components: {},
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.con {
  position: relative;
}
#SceneView {
  width: 100%;
  height: calc(100vh - 140px);
}
#box1 {
  width: 100vw;
  height: 20vh;
}
.esri-popup__main-container {
  max-height: 500px !important;
}
.el-card__body {
  padding: 0 !important;
}
.scale-btn {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 9999;
  display: flex;
  flex-flow: column;
}
</style>
